<template>
  <div ref="annularMutiBar-chart" class="annularMutiBar-chat-container"></div>
</template>
<script>
import echarts from "echarts";
import option, { handlerOptions } from "./config.js";
let that;
let gradient = new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
  { offset: 0, color: "rgba(27, 44, 38, 0.2)" },
  { offset: 1, color: "#007c9d" },
]);
let gradient2 = new echarts.graphic.LinearGradient(0, 0, 1, 1, [
  { offset: 0.2, color: "rgba(0, 117, 169, 0.2)" },
  { offset: 0.5, color: "rgba(0, 117, 169, 0.5)" },
  { offset: 1, color: "#0075a9" },
]);
export default {
  name: "data-v-annularMutiBar",
  props: {
    chartOptions: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    chartOptions: (newVal) => {
      that.setOptions(newVal);
    },
  },
  data() {
    return {
      option,
      chart: null,
      circle: null,
      Arc: null,
      circle2: null,
    };
  },
  methods: {
    init() {
      const dom = this.$refs["annularMutiBar-chart"];
      this.chart = echarts.init(dom);
      this.chart.setOption(this.option);
      window.addEventListener("resize", () => {
        this.chart.resize();
        this.ResizeOtherComponent();
      });
    },
    setOptions(newConfig) {
      handlerOptions(this.chart, newConfig);
    },

    drawCirlce() {
      let zr = this.chart.getZr();
      const { w, h, cx, cy } = this.getSizeProp();
      this.circle = new echarts.graphic.Circle({
        origin: [cx, cy],
        shape: {
          cx: cx,
          cy: cy,
          r: w * 0.15,
        },
        style: {
          fill: gradient,
        },
      });
      zr.add(this.circle);
    },
    drawCirlce2() {
      let zr = this.chart.getZr();
      const { w, h, cx, cy } = this.getSizeProp();
      this.circle2 = new echarts.graphic.Circle({
        origin: [cx, cy],
        shape: {
          cx: cx + w * 0.15,
          cy: cy,
          r: w * 0.01,
        },
        style: {
          fill: "#0075a9",
        },
      });
      zr.add(this.circle2);
    },

    drawArc() {
      let zr = this.chart.getZr();
      const { w, h, cx, cy } = this.getSizeProp();
      this.Arc = new echarts.graphic.Arc({
        origin: [cx, cy],
        shape: {
          cx: cx,
          cy: cy,
          r: w * 0.15,
          startAngle: (300 * Math.PI) / 180,
          endAngle: (360 * Math.PI) / 180,
        },
        style: {
          stroke: gradient2,
          fill: "transparent",
          lineWidth: 2,
        },
      });
      zr.add(this.Arc);
    },
    arcLoop() {
      const that = this;
      this.Arc.animateTo({ rotation: -2 * Math.PI }, 10000, function () {
        that.Arc.attr({
          rotation: 0,
        });
        setTimeout(that.arcLoop, 1);
      });
      // this.Arc.animateTo(
      //   {
      //     shape: {
      //       startAngle: (660 * Math.PI) / 180,
      //       endAngle: (720 * Math.PI) / 180,
      //     },
      //   },
      //   10000,
      //   function () {
      //     that.Arc.attr({
      //       shape: {
      //         startAngle: (300 * Math.PI) / 180,
      //         endAngle: (360 * Math.PI) / 180,
      //       },
      //     });
      //     setTimeout(that.arcLoop, 1);
      //   }
      // );
    },

    circle2Loop() {
      const that = this;
      this.circle2.animateTo({ rotation: -2 * Math.PI }, 10000, function () {
        that.circle2.attr({
          rotation: 0,
        });
        setTimeout(that.circle2Loop, 1);
      });
    },

    ResizeOtherComponent() {
      const { w, h, cx, cy } = this.getSizeProp();
      this.circle.attr({
        origin: [cx, cy],
        shape: {
          cx: cx,
          cy: cy,
          r: w * 0.15,
        },
      });
      this.Arc.attr({
        shape: {
          cx: cx,
          cy: cy,
          r: w * 0.15,
        },
      });
      this.circle2.attr({
        shape: {
          cx: cx + w * 0.15,
          cy: cy,
        },
      });
    },

    getSizeProp() {
      let w = this.chart.getWidth();
      let h = this.chart.getHeight();
      let cx = w / 2,
        cy = h / 2;
      return { w, h, cx, cy };
    },
  },
  created() {
    that = this;
  },
  mounted() {
    this.init();
    this.drawCirlce();
    this.drawCirlce2();
    this.drawArc();
    this.circle2Loop();
    this.arcLoop();
  },
};
</script>
<style src='./index.css' scoped></style>